<!--
  ~ -
  ~  ============LICENSE_START=======================================================
  ~  Copyright (C) 2023 Nordix Foundation.
  ~  ================================================================================
  ~  Licensed under the Apache License, Version 2.0 (the "License");
  ~  you may not use this file except in compliance with the License.
  ~  You may obtain a copy of the License at
  ~
  ~       http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~  Unless required by applicable law or agreed to in writing, software
  ~  distributed under the License is distributed on an "AS IS" BASIS,
  ~  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~  See the License for the specific language governing permissions and
  ~  limitations under the License.
  ~
  ~  SPDX-License-Identifier: Apache-2.0
  ~  ============LICENSE_END=========================================================
  -->
<div class="app-property-metadata">
  <form novalidate class="w-sdc-form two-columns" [formGroup]="metadataForm">
    <div formArrayName="metadataFormList">
      <div *ngFor="let metadata of propertyMetadataArray; let idx = index">
        <div class="w-sdc-form-columns-wrapper">
            <div class="w-sdc-form-column">
              <input type="text" 
                     class="i-sdc-form-input myClass"
                     placeholder="new metadata key"
                     (input)="onChangePropertyMetadataKey(idx, $event.target.value)"
                     [value]="metadata.key"
                     [ngClass]="{'disabled': isViewOnly}"
                     required/>
            </div>
            <div class="w-sdc-form-column">
              <input type="text" 
                     class="i-sdc-form-input myClass"
                     placeholder="new metadata value"
                     (input)="onChangePropertyMetadataValue(idx, $event.target.value)"
                     [value]="metadata.value"
                     [ngClass]="{'disabled': isViewOnly}"
                     required/>
            </div>
            <div class="w-sdc-form-column">
              <span class="sprite-new delete-btn" [ngClass]="{'disabled': isViewOnly}" (click)="removeFromList(idx)"></span>
            </div>
        </div>
        <div class="w-sdc-form-columns-wrapper">
          <div class="validation-errors">
            <ng-container *ngFor="let validation of validationMessages.metadata">
              <div class="input-error" *ngIf="metadataFormArray.at(idx).hasError(validation.type);">
                {{ validation.message }}
              </div>
            </ng-container>
          </div>
        </div>
      </div>
      <div class="w-sdc-form-columns-wrapper" *ngIf="!isViewOnly">
          <div class="add-btn add-list-item w-sdc-form-column" *ngIf="!isViewOnly" [ngClass]="{'disabled': isViewOnly}"
          (click)="addMetadataField()"> Add Metadata Entry </div>
      </div>
    </div>
  </form>
</div>